<template>
  <div ref="chart" class="chart" />
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize'

export default {
  name: 'PieChart',
  // 将代码通过mixins混合，代码就会合并到当前组件中
  // 混合代码有mounted，组件代码也有mounted，都保留（不会覆盖）
  mixins: [resize],
  mounted() {
    const myEcharts = echarts.init(this.$refs.chart)
    const option = {
      title: {
        text: '家用电器',
        subtext: 312,
        subtextStyle: {
          fontSize: 16
        },
        left: 'center',
        top: '42%'
      },
      series: [
        {
          type: 'pie',
          data: [
            {
              name: '家用电器',
              value: 312
            },
            {
              name: '食用酒水',
              value: 336
            },
            {
              name: '个护健康',
              value: 342
            },
            {
              name: '服饰箱包',
              value: 41
            },
            {
              name: '母婴产品',
              value: 188
            },
            {
              name: '其他',
              value: 89
            }
          ],
          // 半径
          radius: ['40%', '80%'],
          // 显示的文字
          label: {
            formatter: '{b}: {c}'
          }
        }
        // {
        //   type: 'pie',
        //   data: [
        //     {
        //       name: '家用电器',
        //       value: 312
        //     },
        //     {
        //       name: '食用酒水',
        //       value: 336
        //     },
        //     {
        //       name: '个护健康',
        //       value: 342
        //     },
        //     {
        //       name: '服饰箱包',
        //       value: 41
        //     },
        //     {
        //       name: '母婴产品',
        //       value: 188
        //     },
        //     {
        //       name: '其他',
        //       value: 89
        //     }
        //   ],
        //   // 半径
        //   radius: ['40%', '80%'],
        //   // 显示的文字
        //   label: {
        //     formatter: '{b}: {c}',
        //     position: 'center'
        //   }
        // }
      ]
    }
    myEcharts.setOption(option)

    // 给myEcharts实例对象绑定事件，实际是给echarts图表绑定事件
    myEcharts.on('mouseover', function (params) {
      const { name, value } = params.data
      myEcharts.setOption({
        title: {
          text: name,
          subtext: value
        }
      })
    })

    // 浏览器的窗口调整事件
    // 注意：onxxx事件只能绑定一个回调函数，后面回调函数是会覆盖的
    // 解决：addEventListener绑定事件
    // window.onresize = function () {
    //   // 让图表也更新
    //   myEcharts.resize()
    // }
    // 隐患：容易导致内存泄露
    // 解决：在beforeDestory中解绑事件
    this.myEcharts = myEcharts
  }
}
</script>

<style scoped>
.chart {
  width: 100%;
  height: 300px;
}
</style>
